<template>
  <div class="prisoner-composition-chart">
    <div class="chart-header">
      <h3>在押罪犯构成分析</h3>
    </div>
    <div class="chart-container">
      <div class="pie-chart-wrapper" ref="pieChartContainer">
       
      </div>
    </div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
  name: 'PrisonerCompositionChart',
  data() {
    return {
      chart: null,
      totalPrisoners: 0,
      mockData: [],
      legendData: []
    }
  },
  mounted() {
    this.generateMockData()
    this.calculateTotalPrisoners()
    this.initChart()
    // this.startDataUpdate()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.destroy()
    }
    if (this.updateTimer) {
      clearInterval(this.updateTimer)
    }
  },
  methods: {
    generateMockData() {
      // 刑期分类数据 - 契合主题的青蓝色系
      let categories = [
        { category: '1-3年', color: '#00ffff', baseCount: 3200 },    // 最亮青色，突出重点
        { category: '3-10年', color: '#1e88e5', baseCount: 2800 },   // 亮蓝色
        { category: '10-20年', color: '#1976d2', baseCount: 1800 },  // 中蓝色
        { category: '20年以上', color: '#0d47a1', baseCount: 1200 }  // 深蓝色
      ]

      this.mockData = []
      let total = 0

      categories.forEach(item => {
        // 添加随机波动
        const randomFactor = 0.9 + Math.random() * 0.2
        const count = Math.round(item.baseCount * randomFactor)
        total += count

        this.mockData.push({
          category: item.category,
          count: count,
          color: item.color,
          percent: Number((count / total).toFixed(2))
        })
      })
    },

    calculateTotalPrisoners() {
      this.totalPrisoners = this.mockData.reduce((sum, item) => sum + item.count, 0)
    },

    initChart() {
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.destroy()
        }

        const container = this.$refs.pieChartContainer
        if (!container) return

        this.chart = new Chart({
          container,
          autoFit: true,
          height: 250
        })

        this.chart.data(this.mockData)

        this.chart.coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.6 })  

        this.chart
          .interval()
          .transform({ type: 'stackY' })
          .encode('y', 'percent')
          .encode('color', 'category')
          .legend({
            position: 'bottom',
            layout: { justifyContent: 'center' },
            color:{
                itemLabelFill: '#fff',
            }
          })
        //   .legend('color', {
        //     position: 'bottom',
        //     layout: { justifyContent: 'center' },
        //     itemLabel: {
        //         itemLabelFill:'#fff'
        //     }
        //   })
          .tooltip((data) => ({
                name: data.category,
                value: `${data.percent * 100}%`,
            }))
          .animate('enter', { type: 'waveIn', duration: 1000 })


        this.chart.theme({
          background: 'transparent',
          view: {
            viewFill: 'transparent'
          }
        })

        this.chart.render()
      })
    },

    startDataUpdate() {
      this.updateTimer = setInterval(() => {
        this.updateChartData()
      }, 12000) // 每12秒更新一次
    },

    updateChartData() {
      // 轻微更新数据以模拟变化
      let newTotal = 0
      this.mockData.forEach(item => {
        const change = Math.round((Math.random() - 0.5) * 100)
        item.count = Math.max(50, item.count + change)
        newTotal += item.count
      })

      this.calculateTotalPrisoners()
      this.updateLegendData()

      if (this.chart) {
        this.chart.changeData(this.mockData)
        // 重新渲染图表
        this.chart.render()
      }
    }
  }
}
</script>

<style scoped>
.prisoner-composition-chart {
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* background: linear-gradient(145deg,
    rgba(0, 80, 120, 0.12) 0%,
    rgba(0, 100, 140, 0.08) 30%,
    rgba(0, 60, 100, 0.05) 70%,
    rgba(0, 90, 130, 0.08) 100%
  ),
  radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
  rgba(0, 0, 0, 0.5); */
  border-radius: 12px;
  padding: 10px;
  /* border: 1px solid rgba(0, 100, 150, 0.3); */
  /* backdrop-filter: blur(10px); */
  /* box-shadow:
    0 8px 32px rgba(0, 100, 150, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1); */
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-shrink: 0;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(45deg,
    rgba(0, 120, 160, 0.9) 0%,
    rgba(0, 100, 140, 0.8) 50%,
    rgba(0, 80, 120, 0.7) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 10px rgba(0, 100, 150, 0.4);
}

.total-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.count-value {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.count-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.chart-container {
  flex: 1;
  display: flex;
  gap: 20px;
  align-items: center;
}

.pie-chart-wrapper {
  flex: 1;
  min-height: 250px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.chart-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

.center-title {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.center-count {
  font-size: 18px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.legend-container {
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.legend-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

.legend-category {
  display: block;
  font-weight: 500;
}

.legend-percentage {
  color: #00ffff;
  font-weight: bold;
}

.legend-count {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .prisoner-composition-chart {
    padding: 10px;
  }

  .chart-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .chart-header h3 {
    font-size: 14px;
  }

  .count-value {
    font-size: 20px;
  }

  .chart-container {
    flex-direction: column;
    gap: 15px;
  }

  .legend-container {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .legend-item {
    flex: 0 0 auto;
    min-width: 100px;
  }

  .pie-chart-wrapper {
    min-height: 200px;
  }

  .center-title {
    font-size: 12px;
  }

  .center-count {
    font-size: 16px;
  }
}
</style>
